<template>

  <vue-seamless-scroll :data="list" :class-option="defaultOption" class="seamless-warp">
      <div v-for="item in list">

        <el-row >
          <el-col :span="24" style="font-size: 14px; margin-top: 2px;">
            <span>{{item.eventTime}}</span>
            <span>&nbsp;&nbsp;</span>

            <span v-if="item.eventLevel === 10">
              <el-tag size="mini" type="danger">特别重大事件</el-tag>
            </span>
            <span v-else-if="item.eventLevel === 20">
              <el-tag size="mini" type="warning">重大事件</el-tag>
            </span>
            <span v-else-if="item.eventLevel === 30">
              <el-tag size="mini" type="success">较大事件</el-tag>
            </span>

            <span>{{item.eventContent}}</span>
          </el-col>
        </el-row>

      </div>
    <!--<ul class="item">-->
    <!--  <li v-for="item in list">-->
    <!--    <span class="title" v-text="item.eventTime"></span>-->
    <!--    <span class="date" v-text="item.eventContent"></span>-->
    <!--  </li>-->
    <!--</ul>-->
  </vue-seamless-scroll>

</template>

<script>

  import http from '@/utils/http'
  import vueSeamlessScroll from 'vue-seamless-scroll'

  // 无限循环滚动插件 https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
  // 插件安装 npm install vue-seamless-scroll --save　
    /*step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 1, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)*/

  export default {
    // 历史上的今天
    name: "HistoryToday",
    components: {
      vueSeamlessScroll
    },
    data() {
      return {
        // 需要滚动内容列表
        list: [],
        // 定时器
        timer: null,
        direction: 'up',
        speed: 50,
        mouseStop: false,
        index: 0,
      }
    },
    methods: {
      /**
       * 历史上的今天
       */
      getTodayInHistory(){
        http.get("/home/getTodayInHistory", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.list = res.data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },

    },
    mounted(){
      this.getTodayInHistory()
    },
    computed: {
      // 滚动的属性
      defaultOption () {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
  }
</script>

<style scoped>

  .seamless-warp {
    height: 65px;
    overflow: hidden;
  }

</style>



